<!-- studyCourseRichtextFrame.html -->
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<title>富文本课程</title>
		<!--<link rel="stylesheet" type="text/css" href="../../css/api.css" />-->
		<!--<link rel="stylesheet" type="text/css" href="../../css/api.css" />-->
<!--		<link rel="stylesheet" type="text/css" href="../../css/weui.min.css" />
		<link rel="stylesheet" href="../../css/mui.min.css" />-->
		<link rel="stylesheet" href="../../css/mui.min.css" />
		<link rel="stylesheet" href="../../css/base.css"/>
		<link rel="stylesheet" href="../../css/CFNetPP_Base.css">
		<style type="text/css">
			body{
				background-color: #FFFFFF
			}
			.content_text {
				word-break: break-all;
				word-wrap: break-word;
				/*text-align:left;*/
				padding: 10px;
			
			}
			/*#richTextContent p:nth-child(1){
			 text-indent: 2em;
			 }*/
			table {
				border: 1px solid #ccc;
				border-collapse: collapse;
				border-spacing: 0;
			}
			td, th {
				border: 1px solid #ccc;
				padding: 0;
			}
			ul li {
				list-style: disc;
			}
			ol li {
				list-style: decimal;
			}
			.feeling {
				padding: 10px;
				margin-top: 10px;
			}
			.feeling-text {
				word-break: break-all;
			}
	
        	p{
				color: #222222;
				font-size: 14px;
			}
			p,span{
				line-height: 1.2em;
			}
			img, a, button, em, del, strong, var, label, cite, small, time, mark, code, textarea, span {
				display: initial;
			}
			.html-video{
				margin: 0;
				padding: 10px 0;
				width: 100%;
				height: 200px;
				background-image: url(../../image/img_voide.png);
				background-size: 100% 200px;
				background-repeat: no-repeat;
			}
		</style>
	</head>
	<body>
	<!--	<div class="feeling">
			<p class="title base_title_font">
				描述
			</p>
			<div class="feeling-text-new base_content_font">
				<p id="richTextbwrite">
					暂无描述
				</p>
			</div>
		</div>-->
		<div class="content_text" id="richTextContent">
			<!-- <div class="html-video" onclick="toPlayVideo()"></div> -->
		</div>
		<div class="noSign"  id="noData"  hidden="hidden">
			<img src="../../image/icon_img.png" width="60%">
			<p class="font16 top_15 base_dark_grey" >
				暂无数据
			</p>
		</div>
		<div class="loadFailure" hidden="hidden" id="noNet">
			<img src="../../image/icon_img01.png" width="60%">
			<p class="" >
				数据加载失败
			</p>
			<p>
				请检查您的网络
			</p>
			<button type="button" class="mui-btn mui-btn-outlined" onclick="loadData()">
				重新加载
			</button>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<script type="text/javascript" src="../../script/databaseOperation.js"></script>
	<script type="text/javascript" src="../../script/jquery.min.js"></script>
	<script type="text/javascript">
		DBReady = function() {
			// var getParam = api.pageParam;
			// if (getParam.richtextType == 1) {
			// 	loadData();
			// } else {
			// 	setupRichText(getParam.other);
			// }
			loadData();
		}
		function loadData() {
			var bewrite = api.pageParam.bewrite;
			if (bewrite != '' && bewrite != null) {
				setupBewrite(bewrite);
			}
			var other = api.pageParam.other;
//			laert(other);
			if (other != null && other != '') {
				var type = other.indexOf(".mp4");
		  		if (type > 0) {//包含mp4
		     		$("#voide").show();
				}
				setupRichText(other);
			} else {
				$('.noSign').show();
			}
		}
		function setupBewrite(bewrite){
//			$('#richTextbwrite').text(bewrite);
		}
		function setupRichText(str) {
			str = htmlStrWithStr(str);
			$api.html($api.byId('richTextContent'), str);
			imageTapToSee();
			setupImage();
		}
		function htmlStrWithStr(currentOther){
			currentOther = currentOther.replace(/\\/g, "");
			currentOther = currentOther.replace(/\<p class=\"edui-video-resource\".*?>.*?<\/p>/g, function(str){
				var re = /url=\"([^\"]*)\"/igm;
				var urlArr = re.exec(str);
				var url = urlArr[1];
				var videoStr = '<div class="html-video" onclick="toPlayVideo(\''+url+'\')"></div>';
				console.log(videoStr);
				return videoStr;
			});
			currentOther = currentOther.replace(/width:\s\d*px;/g, "width: auto;");
			currentOther = currentOther.replace(/width:\d*;/g, "width:auto;");
			currentOther = currentOther.replace(/_width=\"\d*\"/g, "");
			return currentOther;
		}
		function setupImage() {
			var newWidth = api.winWidth - 20;
			$("img").each(function(i) {
				var oldWith = $(this).width();
				if (oldWith == 0) {
					setTimeout(function() {
						setupImage();
					}, 500);
					return;
				}
				if (oldWith > newWidth) {
					var oldHeight = $(this).height();
					var newHeight = oldHeight * (newWidth / oldWith);
					$(this).width(newWidth);
					$(this).height(newHeight);
				}
			});
		}
		function  StrsplitVodeUrl(str){
			var strs = str.split("http:"); 
			var str1 = strs[1].split(".mp4"); 
			return ("http:" + str1[0] + ".mp4");
		}
		function toPlayVideo(url){
			var videoPlayer = api.require('videoPlayer');
		    videoPlayer.play({
		      	path : url,
		      	texts: {
		          	head: {
		                title: api.pageParam.title
		          	}
		      	},
		      	styles : {
		       		head : {
			        	backSize : 24,
			        	backImg : 'widget://image/vp_back.png',
			        	setSize : 24,
			        	setImg : 'widget://image/vp_more.png'
			       	},
			       	foot :{
			        	playSize : 24,
			        	playImg : 'widget://image/vp_play.png',
			        	pauseImg : 'widget://image/vp_pause.png',
			        	nextSize : 24,
			        	nextImg : 'widget://image/vp_next.png'
			       	}
		      	}
	  		}, function(ret, err) {
	         
		 	});
	  	}

	  	function imageTapToSee() {
	    	$('#richTextContent img').on('click', function() {
				showimg([$(this).attr("src")], 0);
			});
		}
	</script>
</html>
